<template>
  <div class="flexContent1">
    <el-form ref="goodsForm" style="height: 100%" :rules="goodsRules" :disabled="routerType === 'detail'"
      :model="goodsForm" class="demo-form-inline" label-position="left" label-width="110px">
      <div class="form">
        <div class="top">
          <div class="basic"><span class="EEEBlock" />基本信息</div>
          <el-row :gutter="24" type="flex">
            <el-col :span="6">
              <el-form-item label="商品名称" prop="name">
                <el-input v-clearEmoji v-model.trim="goodsForm.name" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="助记符" prop="mnemonic">
                <el-input v-clearEmoji v-model.trim="goodsForm.mnemonic" disabled style="width: 100%"
                  :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品类型" prop="type">
                <el-radio-group v-model="goodsForm.type" :disabled="routerType === 'detail'" size="small">
                  <el-radio label="0">整件商品</el-radio>
                  <el-radio label="1">拆零商品</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="产地" prop="producer">
                <el-input v-clearEmoji v-model.trim="goodsForm.producer" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="5">
              <el-form-item label="商品分类" prop="categoryId">
                <!-- @focus="getCategoryTreeList" -->
                <el-cascader ref="cascaderRef" v-model.trim="goodsForm.categoryId" :disabled="routerType === 'detail'"
                  :props="defaultProps" :options="categoryList" style="width: 100%" clearable filterable
                  @change="handleChange" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="品牌" prop="brandId">
                <el-select @click.native="getBrand" v-model.trim="goodsForm.brandId" filterable popper-class="eloption"
                  :disabled="routerType === 'detail'" style="width: 100%"
                  :placeholder="routerType !== 'detail' ? '请选择...' : ''">
                  <el-option v-for="brand in brandList" :key="brand.id" :value="brand.id" :label="brand.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="销售规格" prop="standard">
                <el-input v-clearEmoji v-model.trim="goodsForm.standard" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="销售单位" prop="unitId">
                <el-select @click.native="getUnitEasy" v-model.trim="goodsForm.unitId" popper-class="eloption"
                  :disabled="routerType === 'detail'" filterable style="width: 100%"
                  :placeholder="routerType !== 'detail' ? '请输入...' : ''">
                  <el-option v-for="unit in unitList" :key="unit.id" :value="unit.id" :label="unit.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="保质期(天)" prop="expiryNum">
                <el-input v-clearEmoji v-model.trim="goodsForm.expiryNum" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="5">
              <el-form-item label="生产厂商" prop="manufacturer">
                <el-input v-clearEmoji v-model.trim="goodsForm.manufacturer" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="存储条件" prop="storage">
                <el-select @click.native="getStorageCondition" v-model.trim="goodsForm.storage" popper-class="eloption"
                  :disabled="routerType === 'detail'" style="width: 100%" placeholder="请选择">
                  <el-option v-for="(val, key) in storageList" :key="key" :value="key" :label="val" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="安全库存" prop="minInventory">
                <el-input v-clearEmoji v-model.trim="goodsForm.minInventory" :disabled="routerType === 'detail'"
                  style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="重量(克)" prop="weight">
                <el-input v-clearEmoji v-model="goodsForm.weight" :disabled="routerType === 'detail'" style="width: 100%"
                  :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="4" v-if="routerType === 'detail'">
              <el-form-item label="单规格条码" prop="weight">
                <el-input v-clearEmoji v-model="goodsForm.firstCode" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="5">
              <el-row :gutter="24" type="flex">
                <el-col :span="24">
                  <el-form-item label="长(cm)" prop="longs">
                    <el-input v-clearEmoji v-model="goodsForm.longs" :disabled="routerType === 'detail'"
                      style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24" type="flex">
                <el-col :span="24">
                  <el-form-item label="宽(cm)" prop="width">
                    <el-input v-clearEmoji v-model="goodsForm.width" :disabled="routerType === 'detail'"
                      style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row :gutter="24" type="flex">
                <el-col :span="24">
                  <el-form-item label="高(cm)" prop="height">
                    <el-input v-clearEmoji v-model="goodsForm.height" :disabled="routerType === 'detail'"
                      style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24" type="flex">
                <el-col :span="24">
                  <el-form-item label="体积(cm³)" prop="volume">
                    <el-input v-clearEmoji v-model="goodsForm.volume" :disabled="routerType === 'detail'"
                      style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-form-item label="商品描述" prop="remark">
                <el-input v-clearEmoji v-model.trim="goodsForm.remark" style="width: 100%" type="textarea" :row="5"
                  :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="图片" prop="imgUrl">
                <div style="display: flex" v-if="!goodsForm.imgUrl && routerType !== 'detail'">
                  <el-upload name="multipartFile" :limit="1" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload" list-type="picture-card" :action="action" :data="upData"
                    :headers="headers" :on-error="fileUploadError" class="imgUpload"><i size="12"
                      class="el-icon-plus" /><br /><span class="txt">点击上传图片</span></el-upload>
                  <!-- <img v-if="goodsForm.imgUrl" :src="goodsForm.imgUrl" style="width: 40px;height: 40px;" alt=""> -->
                  <span style="
                      width: 30%;
                      margin-left: 10px;
                      font-size: 12px;
                      color: red;
                      z-index: 1;
                    ">（建议图片尺寸 360x360，<br />
                    大小≤200KB，支持JPG）</span>
                </div>
                <template v-if="goodsForm.imgUrl">
                  <div style="display: flex; width: 100%">
                    <!-- <img v-if="goodsForm.imgUrl" :src="goodsForm.imgUrl"
                      style="height: 128px;object-fit: cover;border: 1px solid #ccc;" alt="" /> -->
                    <el-image v-if="goodsForm.imgUrl" style="
                        height: 128px;
                        object-fit: cover;
                        border: 1px solid #ccc;
                      " :src="goodsForm.imgUrl" :preview-src-list="[goodsForm.imgUrl]">
                    </el-image>
                    <div v-if="routerType !== 'detail'" style="
                        width: 50px;
                        height: 50px;
                        border-radius: 5px;
                        border: 1px dashed #ccc;
                        text-align: center;
                        color: #ccc;
                        margin-left: 5px;
                      ">
                      <i style="cursor: pointer" class="el-icon-delete" @click="delImg" />
                    </div>
                  </div>
                </template>
                <span v-if="!goodsForm.imgUrl && routerType === 'detail'">无</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="btm">
          <div class="tagsTitle">
            <span :class="showType === '1' ? 'actived' : 'noActived'" @click="showType = '1'">经营信息</span>
            <span :class="showType === '2' ? 'actived' : 'noActived'" @click="showType = '2'">多规格</span>
            <!-- <span :class="showType === '3' ? 'actived' : 'noActived'" @click="showType = '3'">多规格</span> -->
          </div>
          <div v-show="showType === '1'" style="flex: 1">
            <el-row :gutter="24" type="flex">
              <el-col :span="6">
                <el-form-item label="大包装" prop="bigPacking">
                  <el-input v-clearEmoji v-model.trim="goodsForm.bigPacking" :disabled="routerType === 'detail'"
                    style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="配送规格" prop="deliveryNorms">
                  <el-input v-clearEmoji v-model.trim="goodsForm.deliveryNorms" :disabled="routerType === 'detail'"
                    style="width: 100%" :placeholder="routerType !== 'detail' ? '请输入...' : ''" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="进项税率(%)" prop="inputRate">
                  <el-select @click.native="getInputRate" v-model.trim="goodsForm.inputRate" popper-class="eloption"
                    style="width: 100%">
                    <el-option v-for="(val, key) in inputRateList" :key="key" :value="key" :label="val" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="销项税率(%)" prop="outputRate">
                  <el-select @click.native="getOutputRate" v-model.trim="goodsForm.outputRate" popper-class="eloption"
                    style="width: 100%">
                    <el-option v-for="(val, key) in outputRateList" :key="key" :value="key" :label="val" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" type="flex">
              <el-col :span="6">
                <el-form-item label="协议进价(元)" prop="agreedPrice">
                  <el-input v-clearEmoji v-model.trim="goodsForm.agreedPrice" :disabled="routerType !== 'add'"
                    style="width: 100%" placeholder="请填写单个商品的价格" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出仓价(元)" prop="outboundPrice">
                  <el-input v-clearEmoji v-model.trim="goodsForm.outboundPrice" :disabled="routerType !== 'add'"
                    style="width: 100%" placeholder="请填写单个商品的价格" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="毛利率(%)" prop="grossRate">
                  <el-input v-clearEmoji v-model.trim="goodsForm.grossRate" disabled style="width: 100%" placeholder="">
                    <svg-icon color="#ccc" slot="suffix" class="" icon-class="percent"
                      style="margin-top: 8px; font-size: 18px" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品税率" prop="taxRate">
                  <el-select @click.native="getTaxRateList" v-model="goodsForm.taxRate" popper-class="eloption"
                    style="width: 100%">
                    <el-option v-for="(val, key) in taxRateList" :key="key" :value="key" :label="val" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24" type="flex">
              <el-col :span="6">
                <el-form-item label="默认供应商" prop="firstSupplier">
                  <el-select @click.native="getSCMList" v-model="goodsForm.firstSupplier" filterable
                    popper-class="eloption" style="width: 100%;" placeholder="请选择供应商">
                    <el-option v-for="firstSupplier in firstSupplierList" :key="firstSupplier.id"
                      :value="firstSupplier.id" :label="firstSupplier.supplierNum + '   ' + firstSupplier.name
                        " />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="备用供应商" prop="secondSupplier">
                  <el-select @click.native="getSCMList" disabled v-model="goodsForm.secondSupplier"
                    popper-class="eloption" style="width: 70%; margin-right: 2%" placeholder="">
                    <el-option v-for="firstSupplier in firstSupplierList" :key="firstSupplier.id"
                      :value="firstSupplier.id" :label="firstSupplier.supplierNum + '   ' + firstSupplier.name
                        " />
                  </el-select>
                  <el-form style="display: inline-block; width: 28%">
                    <el-form-item>
                      <el-button class="addBtn" style="
                          text-align: center;
                          padding: 10px 0;
                          background-color: #0052d9;
                          border: none;
                          color: #fff;
                          margin: 0 !important;
                        " @click.stop="secondSupplierBtn">多供应商</el-button>
                    </el-form-item>
                  </el-form>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品状态" prop="productState">
                  <el-radio-group v-model="goodsForm.productState">
                    <el-radio label="0">正常</el-radio>
                    <el-radio label="1">停用</el-radio>
                    <el-radio label="2">淘汰</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="是否允许点采" prop="isPick">
                  <el-radio-group v-model="goodsForm.isPick" :disabled="routerType === 'detail'" size="small">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-show="showType === '2'" style="flex: 1">
            <div class="codeaddbtn" v-if="routerType !== 'detail'" @click="addcodeFn">
              增加条码
            </div>
            <div style="width: 532px">
              <el-form ref="formData" @submit.native.prevent :model="diaForm" :rules="diaRules">
                <el-table border highlight-current-row ref="tables" :data="diaForm.codeData" class="tablebox"
                  height="150px" size="medium">
                  <el-table-column align="center" type="index" label="序号" width="80" />
                  <el-table-column align="center" prop="barCode" label="商品条码"
                    :width="routerType !== 'detail' ? '200' : '350'">
                    <template slot-scope="scope">
                      <el-form-item v-if="routerType !== 'detail'" :prop="'codeData.' + scope.$index + '.barCode'"
                        :rules="diaRules.barCode">
                        <el-input v-clearEmoji :id="'goodsQty' + scope.$index"
                          @blur="numberChange(scope.row.barCode, scope.$index)" v-model.trim="scope.row.barCode"
                          placeholder="" class="group-inp" size="small" style="width: 100%" />
                      </el-form-item>
                      <span v-if="routerType === 'detail'">{{
                        scope.row.barCode
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="number" label="规格" width="100">
                    <template slot-scope="scope">
                      <el-form-item v-if="routerType !== 'detail'" :prop="'codeData.' + scope.$index + '.number'"
                        :rules="diaRules.number">
                        <el-input v-clearEmoji ref="inputaldQty" v-model.trim="scope.row.number" placeholder=""
                          class="group-inp" size="small" style="width: 100%" />
                      </el-form-item>
                      <span v-if="routerType === 'detail'">{{
                        scope.row.number
                      }}</span>
                    </template>
                    <!-- <template slot-scope="scope" v-if="routerType === 'detail'">
                    </template> -->
                  </el-table-column>
                  <el-table-column align="center" fixed="right" label="操作" width="150" v-if="routerType !== 'detail'">
                    <template slot-scope="scope">
                      <!-- 删除 -->
                      <i class="el-icon-delete" style="cursor: pointer"
                        @click.stop="delCode(scope.row, scope.$index)"></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
          </div>
          <div class="btnDiv">
            <el-button class="submitBtn" v-if="routerType === 'add' || routerType === ''"
              @click.stop="onSubmit">确定</el-button>
            <el-button v-if="routerType === 'edit'" @click.stop="updateGoodsDetail" class="submitBtn">提交</el-button>
            <el-button v-if="routerType !== 'detail'" class="celBtn" style="width: 88px"
              @click.stop="cancelbtn">取消</el-button>
            <el-form>
              <el-form-item>
                <el-button v-if="routerType === 'detail'" class="celBtn" style="width: 88px" @click.stop="cancelbtn"
                  :disabled="false">返回</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-form>
    <div class="dialog">
      <el-dialog :close-on-click-modal="false" :title="routerType !== 'detail' ? '设置多个备用供应商' : '备用供应商'"
        :visible.sync="dialogFormVisible2" @close="diaFormColse">
        <div v-if="routerType !== 'detail'" class="msg" style="color: red">
          提示：请在设置完成后，在商品档案界面点击"确定"后生效
        </div>
        <el-form v-if="routerType !== 'detail'" ref="diaForm2" style="margin-bottom: 20px" :model="diaForm2"
          :rules="diaRules2">
          <el-row :gutter="24" type="flex" justify-content="space-around">
            <el-col :span="24">
              <el-form-item label="备用供应商" label-width="100" prop="id">
                <el-select @click.native="getSCMList" v-model="diaForm2.id" popper-class="eloption"
                  :popper-append-to-body="true" limit="5" filterable size="small" style="width: 50%; margin-right: 10px"
                  @change="selSCMFn">
                  <el-option v-for="item in firstSupplierList" :key="item.id" :value="item.id"
                    :label="item.supplierNum + '   ' + item.name" />
                </el-select>
                <el-button size="small" style="width: 13%" type="primary" @click.stop="addSupplier">增加</el-button>
                <el-button size="small" style="width: 13%" @click.stop="delSupplier1">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border class="tablebox" :data="showSupplier" style="margin: 0 auto; width: 80%" size="medium">
          <el-table-column align="center" type="index" label="序号" width="100" />
          <el-table-column align="center" property="name" label="供应商名称">
            <template v-slot="{ row }">
              {{ row.supplierNum }} {{ row.name }}
            </template>
          </el-table-column>
          <el-table-column v-if="routerType !== 'detail'" align="center" label="操作">
            <template v-slot="row">
              <el-button type="text" @click.stop="delSupplier(row)"><i class="el-icon-delete" /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer" style="padding-right: 8%">
          <el-button @click="dialogFormVisible2 = false" class="submitBtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { DecimalUtils } from "@/utils/math";
import {
  getStorageCondition,
  getOutputRate,
  getInputRate,
  getDictValueAndNameSource,
} from "@/api/dictionary";
import {
  getBrandEasy,
  addGoods,
  updateGoodsDetail,
  getCategoryList,
} from "@/api/goods";
import { getCategoryTreeList, getUnitEasy, getGoodsDetail } from "@/api/goods";
import { getSCMList } from "@/api/scm";
import { getToken } from "@/utils/auth";
import { pinyin } from "pinyin-pro";
export default {
  name: "GoodsAdd",
  data() {
    return {
      showType: "1",
      headers: { token: getToken() },
      action: process.env.VUE_APP_UPLOAD_BASE_API + "/file/uploadFile",
      upData: {
        fileType: "0",
      },
      taxRateList: {},
      dialogFormVisible2: false,
      goodsId: "",
      routerType: "add",
      goodsForm: {
        name: "", // 商品名称
        mnemonic: "", // 助记符
        type: "0", // 商品类型
        manufacturer: "", // 生产厂家
        categoryId: "", // 商品分类Id
        brandId: "", // 品牌Id
        unitId: "", // 商品单位id
        standard: "", // 规格
        firstCode: "", // 商品条码 TODO
        expiryNum: "", // 保质期
        bigPacking: "", // 大包装
        storage: "", // 存储条件
        minInventory: "", // 最低库存量
        weight: "", // 重量KG
        producer: "", // 产地
        remark: "", // 商品描述
        agreedPrice: "", // 进货价
        outboundPrice: "", // 零售价
        grossRate: "", // 毛利率
        minPrice: "", // 最低售价
        inputRate: "0", // 进项税率
        outputRate: "0", // 销项税率
        firstSupplier: "", // 默认供应商id
        secondSupplier: "", // 备用供应商id
        productState: "0", //	商品状态:0.正常,1.停用,2.淘汰
        imgUrl: "",
        taxRate: "0", // 商品税率
        deliveryNorms: "", // 配送规格
        isPick: '1',
        longs: null,
        width: null,
        height: null,
        volume: null,
      },
      goodsRules: {
        name: [
          {
            required: "true",
            message: "商品名称不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 50,
            message: "商品名称长度不能超过50个字符",
            trigger: "change",
          },
        ],
        mnemonic: [
          {
            required: "true",
            message: "助记符不能为空",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: "true",
            message: "请选择商品类型",
            trigger: "change",
          },
        ],
        manufacturer: [
          {
            min: 0,
            max: 50,
            message: "生产厂家名称不能超过50个字符",
            trigger: "change",
          },
        ],
        categoryId: [
          {
            required: "true",
            message: "商品分类不能为空",
            trigger: "change",
          },
        ],
        brandId: [
          {
            required: "true",
            message: "品牌不能为空",
            trigger: "change",
          },
        ],
        isPick: [
          {
            required: "true",
            message: "请选择是否可以点采",
            trigger: "change",
          },
        ],
        unitId: [
          {
            required: "true",
            message: "商品单位不能为空",
            trigger: "change",
          },
        ],
        standard: [
          {
            required: "true",
            message: "规格不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 20,
            message: "规格不能超过20个字符",
            trigger: "change",
          },
        ],
        firstCode: [
          {
            required: true,
            message: "请输入商品条码",
            trigger: "blur",
          },
          {
            min: 0,
            max: 20,
            message: "商品条码长度不能超过20位数字",
            trigger: "blur",
          },
          {
            pattern: /^\d+$/,
            message: "商品条码只能是数字",
            trigger: "blur",
          },
        ],
        expiryNum: [
          {
            // pattern: /^(?:0|(?:-?[1-9]\d*))$/,
            pattern: /^-1$|^[1-9]\d*$/,
            message: "保质期只能为-1或大于0的整数",
            trigger: "change",
          },
          {
            required: true,
            message: "请输入保质期",
            trigger: "blur",
          },
          {
            min: 0,
            max: 5,
            message: "保质期不能超过5位数字",
            trigger: "change",
          },
        ],
        longs: [
          {
            pattern:
              /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
            message: "长度只能是数字",
            trigger: "change",
          },
        ],
        width: [
          {
            pattern:
              /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
            message: "宽度只能是数字",
            trigger: "change",
          },
        ],
        height: [
          {
            pattern:
              /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
            message: "高度只能是数字",
            trigger: "change",
          },
        ],
        bigPacking: [
          {
            pattern: /^\+?[1-9]\d*$/,
            message: "大包装只能是数字",
            trigger: "change",
          },
          {
            required: "true",
            message: "大包装不能为空",
            trigger: "change",
          },
        ],
        minInventory: [
          {
            pattern: /^\+?[1-9]\d*$/,
            message: "最低库存量只能是数字",
            trigger: "change",
          },
          {
            min: 0,
            max: 4,
            message: "最低库存量不能超过4位数",
            trigger: "change",
          },
        ],
        weight: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))?$/,
            message: "重量只能是数字",
            trigger: "change",
          },
          {
            min: 0,
            max: 4,
            message: "重量不能超过4位数",
            trigger: "change",
          },
        ],
        producer: [
          {
            required: "true",
            message: "产地不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 50,
            message: "产地不能超过50个字符",
            trigger: "change",
          },
        ],
        remark: [
          {
            min: 0,
            max: 100,
            message: "描述不能超过100个字符",
            trigger: "change",
          },
        ],
        // /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
        agreedPrice: [
          {
            pattern:
              /^(([1-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
            message: "协议进价必须大于0",
            trigger: "change",
          },
          {
            required: "true",
            message: "协议进价不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 15,
            message: "协议进价不能超过10位数",
            trigger: "change",
          },
        ],
        outboundPrice: [
          {
            pattern:
              /^(([1-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
            message: "出仓价必须大于0",
            trigger: "change",
          },
          // {
          //   validator: validateEnd,
          //   trigger: "change",
          // },
          {
            required: "true",
            message: "出仓价不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 15,
            message: "出仓价不能超过10位数",
            trigger: "change",
          },
        ],
        minPrice: [
          {
            pattern: /^(([1-9]{1}\d*)(\.\d{1,2})?)|((0{1})(\.\d{1,2}))?$/,
            message: "最低售价只能是数字且小数不能超过两位",
            trigger: "change",
          },
          {
            required: "true",
            message: "最低售价不能为空",
            trigger: "change",
          },
          {
            min: 0,
            max: 15,
            message: "最低售价不能超过10位数",
            trigger: "change",
          },
        ],
        inputRate: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "进项税率只能是数字且小数不能超过两位",
            trigger: "change",
          },
          {
            min: 0,
            max: 5,
            message: "进项税率不能超过5位数",
            trigger: "change",
          },
        ],
        outputRate: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "销项税率只能是数字且小数不能超过两位",
            trigger: "change",
          },
          {
            min: 0,
            max: 5,
            message: "销项税率不能超过5位数",
            trigger: "change",
          },
        ],
        firstSupplier: [
          {
            required: "true",
            message: "默认供应商不能为空",
            trigger: "change",
          },
        ],
        productState: [
          {
            required: "true",
            message: "请选择商品状态",
            trigger: "change",
          },
        ],
        // imgUrl: [
        //   {
        //     required: "true",
        //     message: "请选择图片",
        //     trigger: "change",
        //   },
        // ],
        taxRate: [
          {
            required: "true",
            message: "请选择商品税率",
            trigger: "change",
          },
        ],
        deliveryNorms: [
          {
            required: "true",
            message: "请输入配送规格",
            trigger: "change",
          },
          {
            pattern: /^\+?[1-9]\d*$/,
            message: "配送规格必须是正整数",
            trigger: "change",
          },
        ],
      },
      inputRateList: {},
      outputRateList: {},
      brandList: [
        {
          id: "0417580e779b4d689518af3452712b47",
          name: "其他",
        },
      ],
      categoryList: [],
      categoryEasyList: [],
      unitList: [],
      categoryId: "",
      defaultProps: {
        children: "children",
        label: "name",
        emitPath: false,
        value: "id",
      },
      storageList: {},
      firstSupplierList: [],
      secondSupplierList: [],
      dialogFormVisible: false, // 一品多码弹窗
      diaForm: {
        codeData: [],
      },
      diaRules: {
        barCode: [
          {
            required: true,
            message: "请输入商品条码",
            trigger: "blur",
          },
          {
            min: 0,
            max: 20,
            message: "商品条码长度不能超过20位数字",
            trigger: "blur",
          },
          {
            pattern: /^\d+$/,
            message: "商品条码只能是数字",
            trigger: "blur",
          },
        ],
        number: [
          {
            required: true,
            message: "请输入规格",
            trigger: "blur",
          },
          {
            pattern: /^\+?[1-9]\d*$/,
            message: "规格必须是正整数",
            trigger: "blur",
          },
          {
            min: 0,
            max: 2,
            message: "规格最多输入2位数字",
            trigger: "blur",
          },
        ],
      },
      diaForm2: {
        id: "",
      },
      diaRules2: {
        id: [
          {
            required: true,
            message: "请输入备用供应商",
            trigger: "blur",
          },
        ],
      },
      Supplier: "",
      showSupplier: [], // 需要展示的供应商
    };
  },
  watch: {
    goodsForm: {
      handler(newVal, oldVal) {
        if (newVal.outboundPrice && newVal.agreedPrice) {
          const num = DecimalUtils.divide(
            DecimalUtils.subtract(newVal.outboundPrice, newVal.agreedPrice),
            newVal.outboundPrice
          );
          // console.log('1111', DecimalUtils.subtract(newVal.outboundPrice, newVal.agreedPrice));
          // console.log('num', num);
          const grossRate = Math.round(num * 10000) / 100;
          if (isNaN(grossRate)) this.goodsForm.grossRate = "0.00";
          else this.goodsForm.grossRate = grossRate;
        } else {
          this.goodsForm.grossRate = "";
        }
        if (newVal.name) {
          var reg = /[\u4e00-\u9fa5A-Za-z]/g;
          var names = newVal.name.match(reg);
          if (names) {
            name = names.join("");
            this.goodsForm.mnemonic = pinyin(name, { pattern: "first" })
              .toUpperCase()
              .replace(/\s*/g, "");
          } else {
            this.goodsForm.mnemonic = "";
          }
          this.goodsForm.name = newVal.name.replace(
            /(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g,
            ""
          );
        } else {
          this.goodsForm.mnemonic = "";
        }
        if (newVal.longs && newVal.width && newVal.height) {
          let ooo = DecimalUtils.multiply(newVal.longs, newVal.width);
          this.goodsForm.volume = DecimalUtils.multiply(ooo, newVal.height).toFixed(2)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.init();
    this.getBrand();
    this.getCategoryTreeList();
    // this.getUnitEasy();
    // this.getSCMList();
    this.getStorageCondition();
    // this.getOutputRate();
    // this.getInputRate();
    // this.getTaxRateList();
    this.getCategoryList();
    this.routerType = this.$route.query.type ? this.$route.query.type : "add";
    console.log(this.$route.meta.title);
    this.goodsId = this.$route.query?.id;
    console.log(this.routerType, this.$route.meta.title);
    if (this.goodsId) {
      this.getGoodsDetail();
      this.getBrand();
      this.getCategoryTreeList();
      this.getUnitEasy();
      this.getSCMList();
      // this.getStorageCondition();
      this.getOutputRate();
      this.getInputRate();
      this.getTaxRateList();
    }
  },
  methods: {
    async getCategoryList() {
      const res = await getCategoryList();
      if (res.code === 200) {
        this.categoryEasyList = res.data.categoryList;
        // console.log("categoryEasyList", this.categoryEasyList);
      }
      // console.log(res);
    },
    init() {
      this.goodsForm = {
        name: "", // 商品名称
        mnemonic: "", // 助记符
        type: "0", // 商品类型
        manufacturer: "", // 生产厂家
        categoryId: "", // 商品分类Id
        brandId: "0417580e779b4d689518af3452712b47", // 品牌Id
        unitId: "", // 商品单位id
        standard: "", // 规格
        firstCode: "", // 商品条码 TODO
        expiryNum: "", // 保质期
        bigPacking: "", // 大包装
        storage: "0", // 存储条件
        minInventory: "", // 最低库存量
        weight: "", // 重量KG
        producer: "", // 产地
        remark: "", // 商品描述
        agreedPrice: "", // 进货价
        outboundPrice: "", // 零售价
        grossRate: "", // 毛利率
        minPrice: "", // 最低售价
        inputRate: "0", // 进项税率
        outputRate: "0", // 销项税率
        firstSupplier: "", // 默认供应商id
        secondSupplier: "", // 备用供应商id
        productState: "0", //	商品状态:0.正常,1.停用,2.淘汰
        imgUrl: "",
        taxRate: "0", // 商品税率
        deliveryNorms: "", // 配送规格
        isPick: '1'
      };
    },
    // 获取数据字典的数据
    async getStorageCondition() {
      const res = await getStorageCondition();
      if (res.code === 200) {
        this.storageList = res.data;
        // console.log('存储条件', this.storageList)
      } else {
        // this.$message.error(res.message);
      }
    },
    // 获取商品税率
    async getTaxRateList() {
      const res = await getDictValueAndNameSource("TAX_RATE");
      if (res.code === 200) {
        this.taxRateList = res.data;
        console.log("商品税率", this.taxRateList);
      }
    },
    async getOutputRate() {
      const res = await getOutputRate();
      if (res.code === 200) {
        this.outputRateList = res.data;
        // console.log('进项税率', this.inputRateList)
      } else {
        // this.$message.error(res.message);
      }
    },
    async getInputRate() {
      const res = await getInputRate();
      if (res.code === 200) {
        this.inputRateList = res.data;
        // console.log('销项税率', this.outputRateList)
      } else {
        // this.$message.error(res.message);
      }
    },
    selSCMFn(e) {
      // console.log(e, '选择供应商')
      this.Supplier = e;
      // this.showSupplier.push = e
    },
    // 商品详情
    async getGoodsDetail() {
      const res = await getGoodsDetail({ id: this.goodsId });
      // console.log('商品详情', res)
      if (res.code === 200) {
        // const data = res.data
        const data = res.data;
        // console.log('商品', data)
        this.goodsForm = data.commodityVo;
        this.$set(
          this.goodsForm,
          "categoryId",
          String(data.commodityVo.categoryId ? data.commodityVo.categoryId : "")
        );
        this.$set(
          this.goodsForm,
          "weight",
          String(data.commodityVo.weight ? data.commodityVo.weight : "")
        );
        this.$set(
          this.goodsForm,
          "expiryNum",
          String(data.commodityVo.expiryNum ? data.commodityVo.expiryNum : "")
        );
        this.$set(
          this.goodsForm,
          "bigPacking",
          String(data.commodityVo.bigPacking ? data.commodityVo.bigPacking : "")
        );
        this.$set(
          this.goodsForm,
          "minInventory",
          String(
            data.commodityVo.minInventory ? data.commodityVo.minInventory : ""
          )
        );
        this.$set(
          this.goodsForm,
          "agreedPrice",
          String(
            data.commodityVo.agreedPrice ? data.commodityVo.agreedPrice : ""
          )
        );
        this.$set(
          this.goodsForm,
          "outboundPrice",
          String(
            data.commodityVo.outboundPrice ? data.commodityVo.outboundPrice : ""
          )
        );
        this.$set(
          this.goodsForm,
          "minPrice",
          String(data.commodityVo.minPrice ? data.commodityVo.minPrice : "")
        );
        this.$set(
          this.goodsForm,
          "inputRate",
          String(data.commodityVo.inputRate ? data.commodityVo.inputRate : "")
        );
        this.$set(
          this.goodsForm,
          "outputRate",
          String(data.commodityVo.outputRate ? data.commodityVo.outputRate : "")
        );
        this.$set(
          this.goodsForm,
          "deliveryNorms",
          String(
            data.commodityVo.deliveryNorms ? data.commodityVo.deliveryNorms : ""
          )
        );
        this.diaForm.codeData = data.commodityVo?.barCodeList;
        if (data.commodityVo?.barCodeList.length > 0) {
          this.diaForm.codeData = data.commodityVo.barCodeList.map((item) => {
            return {
              barCode: item.barCode,
              number: String(item.number),
            };
          });
        }
        this.showSupplier = data.commodityVo?.supplierList;
        this.showSupplier.forEach((item) => {
          this.secondSupplierList.push({ id: item.id });
        });
      } else {
        // this.$message.error(res.message);
      }
    },
    onSubmit() {
      this.$refs.goodsForm.validate(async (isOk) => {
        if (isOk) {
          if (this.diaForm.codeData.length > 0) {
            // console.log('this.$refs.formData', this.$refs.formData);
            this.$refs.formData.validate(async (isOk) => {
              if (isOk) {
                console.log("校验通过1111");
                console.log("this.secondSupplierList", this.secondSupplierList);
                console.log(
                  "校验通过",
                  this.goodsForm,
                  this.diaForm.codeData,
                  this.showSupplier
                );
                this.diaForm.codeData = [...new Set(this.diaForm.codeData)];
                const agreedPrice = Number(this.goodsForm.agreedPrice);
                const outboundPrice = Number(this.goodsForm.outboundPrice);
                // if (outboundPrice < agreedPrice) {
                //   this.$message.warning("出仓价须大于等于协议进价");
                //   return;
                // }
                // return
                const res = await addGoods({
                  barCodeList: [...this.diaForm.codeData],
                  commodity: { ...this.goodsForm },
                  supplierList: [...this.secondSupplierList],
                  longs: this.goodsForm.longs,
                  width: this.goodsForm.width,
                  height: this.goodsForm.height,
                });
                if (res.code === 200) {
                  this.$message.success("添加成功");
                  this.$refs.goodsForm.resetFields();
                  this.diaForm.codeData = [];
                  this.closeTag("goodsInfo");
                } else {
                  // this.$message.error(res.message);
                }
                console.log("添加商品", res);
              } else {
                this.$message.warning("请检查商品条码信息");
              }
            });
          } else {
            console.log(this.diaForm.codeData);
            this.$message.warning("请添加商品条码");
          }
        } else {
          this.$message.warning("请填写完整信息");
        }
      });
    },
    async getBrand() {
      const res = await getBrandEasy();
      if (res.code === 200) {
        // const data = res.data
        const data = res.data;
        this.brandList = data.brandList;
      } else {
      }
    },
    async getCategoryTreeList() {
      const res = await getCategoryTreeList();
      if (res.code === 200) {
        const data = res.data;
        this.categoryList = data.categoryList;
      } else {
      }
    },
    async getUnitEasy() {
      const res = await getUnitEasy();
      if (res.code === 200) {
        const data = res.data;
        this.unitList = data.unitList;
      } else {
      }
    },
    async getSCMList() {
      const res = await getSCMList();
      if (res.code === 200) {
        const data = res.data;
        console.log('data', data);
        this.firstSupplierList = data.list;
      }
    },
    // 分类选择后
    handleChange(value) {
      console.log("分类", value);
      if (value) {
        // console.log(this.categoryEasyList);
        const nodes = this.categoryEasyList.filter((item) => item.id === value);
        // return;
        console.log("nodes", nodes);
        if (nodes[0].level === "3") {
          this.goodsForm.categoryId = value;
          console.log("ok", this.goodsForm.categoryId);
        } else {
          this.goodsForm.categoryId = "";
          this.categoryId = "";
          console.log("no", this.goodsForm.categoryId);
          this.$message.error("请选择三级分类");
        }
      }
    },
    codeBtn() {
      this.dialogFormVisible = true;
      console.log("codeBtn");
    },
    secondSupplierBtn() {
      this.dialogFormVisible2 = true;
    },
    diaFormColse() {
      // this.dialogFormVisible = false;
      this.dialogFormVisible2 = false;
    },
    delSupplier(row) {
      console.log(row);
      this.secondSupplierList.splice(row.$index, 1);
      this.showSupplier.splice(row.$index, 1);
      console.log(this.secondSupplierList, this.showSupplier);
      this.diaForm2 = { id: "" };
      if (this.secondSupplierList.length !== 0) {
        this.goodsForm.secondSupplier = this.secondSupplierList[0].id;
      } else {
        this.diaForm2 = { id: "" };
        this.goodsForm.secondSupplier = "";
      }
    },
    addSupplier() {
      this.$refs.diaForm2.validate((isOk) => {
        if (isOk) {
          // if (!this.Supplier) return console.log(1111)
          const flag = this.secondSupplierList.some((item) => {
            return item.id === this.Supplier;
          });
          if (flag) {
            this.$message.error("供应商已存在");
            this.$refs.diaForm2.resetFields();
          } else {
            this.secondSupplierList.push({ id: this.Supplier });
            this.firstSupplierList.forEach((element) => {
              if (element.id === this.Supplier) {
                console.log(element);
                // return
                this.showSupplier.push(element);
              }
            });
            this.diaForm2 = { id: "" };
            this.Supplier = {};
            this.goodsForm.secondSupplier = this.showSupplier[0].id;
            console.log(
              "增加供应商",
              this.secondSupplierList,
              this.showSupplier
            );
            // }
          }
        } else {
          this.$message.error("请选择供应商");
        }
      });
    },
    delSupplier1() {
      console.log("删除供应商");
      this.diaForm2 = { id: "" };
      // this.$refs.diaForm2.resetFields()
    },
    cancelbtn() {
      this.$refs.goodsForm.resetFields();
      this.diaForm.code = "";
      this.barCodeList = [];
      this.diaForm2 = { id: "" };
      this.secondSupplierList = [];
      this.showSupplier = [];
      this.closeTag("goodsInfo");
    },
    updateGoodsDetail() {
      console.log("修改商品信息");
      this.$refs.goodsForm.validate(async (isOk) => {
        if (isOk) {
          if (this.diaForm.codeData.length > 0) {
            this.$refs.formData.validate(async (isOk) => {
              if (isOk) {
                console.log("校验通过", this.goodsForm, this.diaForm.codeData);
                const res = await updateGoodsDetail({
                  barCodeList: [...this.diaForm.codeData],
                  commodity: { ...this.goodsForm },
                  supplierList: [...this.secondSupplierList],
                });
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.$refs.goodsForm.resetFields();
                  this.diaForm.codeData = [];
                  this.closeTag("goodsInfo");
                } else {
                  // this.$message.error(res.message);
                }
                console.log("修改商品", res);
              } else {
                this.$message.warning("请检查商品条码信息");
              }
            });
          } else {
            this.$message.warning("请添加商品条码");
          }
        } else {
          this.$message.warning("请填写完整信息");
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.goodsForm.imgUrl =
        this.$store.getters.imgBaseUrl +
        res.data.filePath +
        res.data.fileNewName;
      console.log(res);
      console.log(this.goodsForm.imgUrl, "this.goodsForm.imgUrl");
      this.$message.success("上传成功");
    },
    delImg() {
      this.goodsForm.imgUrl = "";
    },
    beforeAvatarUpload(file) {
      console.log(file);

      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isOKType =
        fileType === ".jpg" || fileType === ".png" || fileType === ".jpeg";
      if (!isOKType) {
        this.$message.error("图片格式只能为jpeg/png/jpg");
      }

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 5MB!");
      }
      // if (isOKType && isLt2M) {
      //   document.getElementById("imgUploadId").style.display = "none";
      //   console.log(document.getElementById("imgUploadId"), 'document.getElementById("uploadImg")');
      // }
      return isLt2M && isOKType;
    },
    fileUploadError(res) {
      // document.getElementById("uploadImg").style.display = "inline-block";
      this.$message.error(res.message);
    },
    changeCellEvent(params) {
      console.log("params", params);
    },
    movecolumn(row, index) {
      console.log("row", row, index);
    },
    addcodeFn() {
      this.diaForm.codeData.push({ barCode: "", number: "1" });
      const length = this.diaForm.codeData.length - 1;
      console.log("this.codeData");
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.tables.bodyWrapper.scrollTop =
            this.$refs.tables.bodyWrapper.scrollHeight;
          document.getElementById("goodsQty" + length).focus();
          // this.$refs['goodsQty' + (length)].focus()
        }, 500);
      });
    },
    numberChange(val, index) {
      const arr = this.diaForm.codeData.map((item) => item.barCode);
      if (arr.length !== [...new Set(arr)].length) {
        this.$message.warning("条码不能重复");
        this.diaForm.codeData[index].barCode = "";
        console.log("arr", arr);
      }
    },
    delCode(row, index) {
      this.diaForm.codeData.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.flexContent1 {
  background-color: #eeeeee;
  height: 100%;

  .form {
    display: flex;
    flex-direction: column;
    height: 100%;

    .top {
      padding: 32px 32px 0 32px;
      border-radius: 6px 6px 6px 6px;
      height: 438px;
      background-color: #fff;
      margin-bottom: 16px;
    }

    .btm {
      z-index: 1;
      flex: 1;
      padding: 32px 32px 12px 32px;
      border-radius: 6px 6px 6px 6px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .basic {
      font-family: PingFang SC, PingFang SC;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 32px;
    }

    .imgUpload {
      ::v-deep .el-upload:hover {
        border-color: #409eff;
      }

      ::v-deep .el-upload {
        position: relative;
        /* // margin-bottom: 10px; */
        margin-left: 5px;
        width: 120px;
        height: 128px;
        line-height: 20px;
        padding-top: 35px;
      }

      .txt {
        color: #595858;
        font-size: 12px;
      }
    }
  }
}

.tagsTitle {
  margin-bottom: 26px;
  padding: 0;

  .actived {
    display: inline-block;
    width: 112px;
    height: 34px;
    background: #0052d9;
    border-radius: 2px 2px 2px 2px;
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #ffffff;
  }

  .noActived {
    display: inline-block;
    width: 112px;
    height: 34px;
    cursor: pointer;
    background: #e7e7e7;
    border-radius: 2px 2px 2px 2px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34px;
    text-align: center;
    border: 1px solid #ffffff;
  }
}

.codeaddbtn {
  margin-bottom: 21px;
  width: 88px;
  height: 32px;
  background: #0052d9;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}

.btnDiv {
  display: flex;
  padding-left: 90%;
}

.el-upload--picture-card i {
  font-size: 12px !important;
}

.el-button--small {
  padding: 9px 0;
}

::deep el-button {
  text-align: center;
}

.toastRow {
  margin: 0 !important;
  padding: 0;
  margin-bottom: 5px !important;
  /* text-align: center; */
  color: red;
  font-size: 14px;

  span {
    padding-left: 120px;
  }
}

.el-form-item--small.el-form-item {
  margin-bottom: 26px !important;

  .el-form-item--small.el-form-item {
    margin-bottom: 0 !important;
  }
}

::v-deep .el-icon-circle-close:before {
  color: #fff;
}
</style>
